iT邦幫忙

2023 iThome 鐵人賽

DAY 15
0
Modern Web

給心理人的前端網頁開發系列 第 15

[給心理人的前端網頁開發] 15 關卡二:網路問卷 - 用 Google App Script 當後端

  • 分享至 

  • xImage
  •  

關卡二要做出一個網路問卷系統。昨天講了用 Google Sheet 當作資料庫,今天要用 Google App Script 當作是後端。今天會提到

  • 後端具體來說在幹麻,API 是啥可以吃嗎
  • 該怎麼用 Google App Script 當作後端
  • 如何用 Postman 去測試後端是否能正常運作

一、後端是啥、API 又是啥

在前幾天有提到,後端其實就是前端與資料的橋樑。

當前端要最新的資料時,前端會向後端發出請求,接著後端會跟資料庫請求資料。資料庫收到請求後回傳響應給後端,最後後端再回傳響應給前端。

那前端跟後端具體來說,會如何進行交流呢?就是透過 API (Application Interface),應用程式界面。以網頁程式來說,後端的 API 會以網址的方式呈現,讓前端可以透過 API 去跟後端拿資料。

例如,想知道一個使用者的資料,後端開發者可以建立一個網址,讓前端開發者去呼叫取得資料。例如:https://random-data-api.com/api/v2/users。裡面有 first_name、last_name、email 等資料,前端開發者從 API 取得響應後,就可以自行取用這些資料。

{
	"last_name": "Williamson",
	"username": "santana.williamson",
	"email": "santana.williamson@email.com",
}

在 API 的功能設計中,會有新增、修改、刪除、查詢、取得資料等功能。而在關卡二:網路問卷中,我們只會用到新增功能。但為了教學說明,也會稍微提一下取得資料。

後端在開發 API 的功能時,不同的的功能類型,會對應到不同的寫法。例如查詢與取得會用 GET、新增會用到 POST、修改會用到 PUT or PATCH、刪除會用到 DELETE。這邊只要稍微知道有這觀念就好。

二、Google App Script

Google App Script 是 Google 提供的一個語言與服務,可以連動一些 Google 的服務,像是 Google Sheet。打開 Google App Script 編輯頁面的步驟: 擴充功能 -> App Script。詳細操作請參考延伸閱讀。

以下程式碼會用註解解釋每個區塊的程式碼在做什麼

var ss = SpreadsheetApp.getActiveSpreadsheet(), // 抓取對應到的 Google Sheet
sheet1 = ss.getSheetByName("questionnaire"); // "sheet1" 改成你的工作表名稱

// 若前端發送 GET 請求給後端
// 則回傳響應文字 'Hello World
function doGet(e) {
  return ContentService.createTextOutput('Hello World');
}

// 若前端發送 POST 請求給後端
// 則回傳響應 write_data(para) 的執行結果
function doPost(e) {
  var para = JSON.parse(e.postData.contents); // 存放 post 所有傳送的資料
  return write_data(para);
}

function write_data(para) {
  var date = new Date() // 抓目前的日期與時間
  const {
    name,
    intro,
    sex,
    age,
    height,
    weight,
    why,
    note
  } = para // 從參數中取出問卷需要的欄位
  sheet1.appendRow([date, name, intro, sex, age, height, weight, why, note]); // 插入一列新的資料 
  return ContentService.createTextOutput("thanks for your help") // 回傳響應文字 thanks for your help
}

延伸資料

(2023.10.01 更新)Google App Script,可能需要搭配 GCP 專案。參考一下教學資源進行設定

延伸閱讀

小結

今天提到了

  • 後端具體來說在幹麻,API 是啥可以吃嗎
  • 該怎麼用 Google App Script 當作後端
  • 如何用 Postman 去測試後端是否能正常運作

明天就介紹開發前端網頁,以及將問卷資料從前端丟往後端


上一篇
[給心理人的前端網頁開發] 14 關卡二:網路問卷 - 用 Google Sheet 當資料庫
下一篇
[給心理人的前端網頁開發] 16 關卡二:網路問卷 - 在 CodeSandBox 上寫前端網頁問卷
系列文
給心理人的前端網頁開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言